<template>
    <page-header-wrapper :title="false">
      <a-card :bordered="false" :style="{margin:'0 -24px',padding:0}">
        <!-- 新建 -->
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
        </div>
        <!-- 查询表单 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="4" :sm="24">
                <a-form-item label="持卡对象">
                  <a-input :allowClear="true" v-model="queryParam.fullname" placeholder="请输入持卡对象"/>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24">
                <a-form-item label="村庄">
                  <a-select :allowClear="true" v-model="queryParam.village_id" placeholder="请选择村庄" default-value="0">
                    <a-select-option v-for="(item, index) in villageChooseList" :key="index" :value="item.village_id">
                      {{ item.village_name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="状态">
                  <a-select :allowClear="true" v-model="queryParam.status" placeholder="请选择状态" default-value="0">
                    <a-select-option v-for="(item, index) in cardStatus" :key="index" :value="item.value">
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="24">
                <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                  <a-button type="primary" @click="handleSearch">查询</a-button>
                  <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 表格 -->
        <a-spin :spinning="loading">
          <a-table :dataSource="cardListData" :columns="cardListColumns" rowKey="id">
            <span slot="status" slot-scope="text, record">
              <template>
                <span>{{ record.status == 1? '启用' : '禁用' }}</span>
              </template>
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleHistory(record)">使用记录</a>
                <a-divider type="vertical"/>
                <a @click="btnStatus(record)">{{ record.status == 1? '禁用' : '启用' }}</a>
                <a-divider type="vertical"/>
                <a @click="btnDel(record)">删除</a>
              </template>
            </span>
          </a-table>
        </a-spin>
        <!-- 新增村民弹出模板 -->
        <a-modal v-model="addVisible" title="新增村民" @ok="handleOk" @cancel="handleCancel">
            <a-form v-bind="formLayout" v-if="mobileIsChecked == 0">
              <a-form-item label="手机号" required>
                <a-input placeholder="请输入手机号" v-model="formData.mobile" :maxLength="11" style="width:180px;margin-right: 20px;"/>
                <a-button type="primary" @click="handleCheck">检测手机号</a-button>
              </a-form-item>
            </a-form>
            <a-form v-bind="formLayout" v-else>
              <a-form-item label="手机号" required>
                <a-input placeholder="" v-model="userMes.mobile" :maxLength="11" style="width:180px;margin-right: 20px;" disabled/>
              </a-form-item>
              <a-form-item label="姓名" required>
                <a-input placeholder="" v-model="userMes.fullname" :maxLength="11" style="width:180px;margin-right: 20px;" disabled/>
              </a-form-item>
              <a-form-item label="所属村庄" required>
                  <a-select :allowClear="true" v-model="userMes.village_id" placeholder="请选择村庄" default-value="0">
                    <a-select-option v-for="(item, index) in villageChooseList" :key="index" :value="item.village_id">
                      {{ item.village_name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
        <!-- 删除弹窗 -->
        <a-modal v-model="delVisible" title="提示" @ok="handleDel" @cancel="handleDelCancel">
            <span>您确定要删除吗？一经删除，无法恢复！</span>
        </a-modal>
        <!-- 使用记录弹窗 -->
          <a-modal v-model="historyVisible" title="使用记录" @ok="handleOk" @cancel="handleCancel">
            <a-spin :spinning="loading">
              <a-table :dataSource="historyListData" :columns="historyListColumns" rowKey="id">
                <span slot="status" slot-scope="text, record">
                  <template>
                    <span>{{ record.status == 1? '启用' : '禁用' }}</span>
                  </template>
                </span>
                <span slot="action" slot-scope="text, record">
                  <template>
                    <a @click="handleHistory(record)">使用记录</a>
                    <a-divider type="vertical"/>
                    <a @click="btnStatus(record)">{{ record.status == 1? '禁用' : '启用' }}</a>
                    <a-divider type="vertical"/>
                    <a @click="btnDel(record)">删除</a>
                  </template>
                </span>
              </a-table>
            </a-spin>
          </a-modal>
      </a-card>
    </page-header-wrapper>
</template>
<script>
import { notification } from 'ant-design-vue'
import { checkMobile, getCardList, getVillageList, addCard, updateStatus, getHistoryList } from '@/api/card'
  export default {
    data () {
      this.formLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19 }
        }
      }
      return {
        formData: {
          mobile: undefined
        },
        queryParam: {
          fullname: undefined,
          village_id: undefined,
          status: undefined
        },
        villageList: [],
        addVisible: false,
        // 手机验证正则
        mobileRule: /^1[3456789]\d{9}$/,
        // 手机号检测状态
        mobileIsChecked: 0,
        // 表格数据
        cardListData: [],
        // 表头
        cardListColumns: [
          {
            title: 'ID',
            dataIndex: 'id',
            align: 'center'
          },
          {
            title: '持卡对象',
            dataIndex: 'fullname',
            align: 'center'
          },
          {
            title: '所属村庄',
            dataIndex: 'village_name',
            align: 'center'
          },
          {
            title: '卡片状态',
            dataIndex: 'status',
            align: 'center',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '使用次数',
            dataIndex: 'logs_count',
            align: 'center'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 检测手机号后获得的用户信息
        userMes: {},
        // 村庄列表
        villageChooseList: [],
        // 删除弹窗开关
        delVisible: false,
        // 卡片信息
        cardMes: {},
        // 加载开关
        loading: true,
        // 使用记录开关
        historyVisible: false,
        // 使用记录列表
        historyListData: [],
        // 使用记录表头
        historyListColumns: [
          {
            title: 'ID',
            dataIndex: 'id',
            align: 'center'
          },
          {
            title: '持卡对象',
            dataIndex: 'fullname',
            align: 'center'
          },
          {
            title: '所属村庄',
            dataIndex: 'village_name',
            align: 'center'
          },
          {
            title: '消费商家',
            dataIndex: 'shop_name',
            align: 'center'
          },
          {
            title: '核销时间',
            dataIndex: 'created_at',
            align: 'center'
          }
        ],
        // 发卡状态
        cardStatus: [
          {
            label: '全部'
          },
          {
            value: 1,
            label: '启用中'
          },
          {
            value: 2,
            label: '禁用中'
          }
        ]
      }
    },
    methods: {
      // 获取发卡列表
      btnGetList () {
        const from = {
          page: 1,
          per_page: 10
        }
        getCardList(from).then(res => {
          this.cardListData = res.data
          this.loading = false
        })
      },
      // 新增村民-打开弹窗
      handleAdd () {
        this.addVisible = true
      },
      // 检测手机号
      handleCheck () {
        if (this.formData.mobile == undefined || this.formData.mobile == '') {
          notification.open({
          type: 'warning',
          message: '提示',
          description: '手机号不能为空！'
        })
        return
        }
        if (this.mobileRule.test(this.formData.mobile) == false) {
          notification.open({
            type: 'warning',
            message: '提示',
            description: '请输入正确格式手机号！'
          })
          return
        }
        const from = {
          mobile: this.formData.mobile
        }
        checkMobile(from).then(res => {
            this.mobileIsChecked = 1
            this.userMes.mobile = res.mobile
            this.userMes.fullname = res.fullname
            this.userMes.add_customer_id = res.customer_id
            console.log(this.res)
        })
        getVillageList().then(res => {
          console.log(res)
          this.villageList = res.list
        })
      },
      // 新增村民确认回调
      handleOk () {
        if (this.userMes.fullname == undefined || this.userMes.fullname == '') {
          notification.open({
            type: 'warning',
            message: '提示',
            description: '暂无该用户信息！'
          })
          return
        }
        if (this.userMes.village_id == undefined || this.userMes.village_id == '') {
          notification.open({
            type: 'warning',
            message: '提示',
            description: '请选择所属村庄！'
          })
          return
        }
        addCard(this.userMes).then(res => {
          this.addVisible = false
        })
        notification.open({
            type: 'success',
            message: '提示',
            description: '新增成功！'
        })
        this.mobileIsChecked = 0
        this.formData.mobile = undefined
        setTimeout(() => {
          this.btnGetList()
        }, 1000)
      },
      // 新增村民关闭回调
      handleCancel () {
        this.mobileIsChecked = 0
        this.formData.mobile = undefined
        this.userMes = {}
      },
      // 点击删除链接
      btnDel (data) {
        this.delVisible = true
        this.cardMes = data
        console.log(data)
      },
      // 确认删除回调
      handleDel () {
        const from = {
          id: this.cardMes.id,
          status: 3
        }
        updateStatus(from).then(res => {
          notification.open({
            type: 'success',
            message: '提示',
            description: '删除成功！'
        })
        setTimeout(() => {
          this.delVisible = false
          this.btnGetList()
        }, 1000)
        })
      },
      // 取消删除回调
      handleDelCancel () {
        this.delVisible = false
      },
      // 启用与禁用
      btnStatus (data) {
        if (data.status == 1) {
          const from = {
            id: data.id,
            status: 2
          }
          updateStatus(from).then(() => {
            notification.open({
            type: 'success',
            message: '提示',
            description: '禁用成功！'
          })
            this.btnGetList()
          })
        } else {
          const from = {
            id: data.id,
            status: 1
          }
          updateStatus(from).then(() => {
            notification.open({
            type: 'success',
            message: '提示',
            description: '启用成功！'
          })
            this.btnGetList()
          })
        }
      },
      // 使用记录窗口
      handleHistory (data) {
        console.log(data)
        this.historyVisible = true
        const from = {
          checked_customer_id: data.customer_id,
          village_id: data.village_id,
          page: 1,
          per_page: 10
        }
        getHistoryList(from).then(res => {
          console.log(res)
          this.historyListData = res.data
        })
      },
      // 查询
      handleSearch () {
        console.log(this.queryParam)
        const from = {
          ...this.queryParam,
          page: 1,
          per_page: 10
        }
        getCardList(from).then(res => {
          this.cardListData = res.data
          this.loading = false
        })
      },
      // 获取全部村庄
      getAllVillage () {
        getVillageList().then(res => {
          this.villageChooseList = res.list
          console.log(res)
        })
      },
      // 重置
      handleReset () {
        this.queryParam = {
          fullname: undefined,
          village_id: undefined,
          status: undefined
        }
        this.btnGetList()
      }
    },
    mounted () {
      this.btnGetList()
      this.getAllVillage()
    }
  }
</script>
